<template>
<moyu-row :left-span="showDetail?18:24" :right-span="showDetail?6:0">
  <template #leftField>
    <trans-list-card @row-click="showDetailHandler"/>
  </template>
  <template v-if="showDetail" #rightField>
    <trans-detail-card v-model="detailForm"/>
  </template>
</moyu-row>
</template>

<script setup>

import MoyuRow from "@/components/MoyuRow/MoyuRow.vue";
import TransListCard from "@/views/kettle/trans/card/TransListCard.vue";
import {ref} from 'vue'
import TransDetailCard from "@/views/kettle/trans/card/TransDetailCard.vue";

// 是否展示详情
const showDetail = ref(false)

const detailForm = ref({
  // 转换名称
  transName: '',

  //输入源
  inputId: '',
  transSql: '',

  // 输出源
  outputId: '',
  tableName: '',

  // 备注
  remark: ''
})

const showDetailHandler = function (row) {
  detailForm.value = row
  showDetail.value = true
}

</script>

<style scoped>

</style>